<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
			
		* {
		  margin: 0;
		  padding: 0;
		}
		html, body {
			width: 100%;
			height: 100%;
		}

		.create-button {
			height: 4px;
			width: 100%;
		    text-align: left;
		    font-size: 1.2rem;
		    border: none;
		    margin-right: 0;
		    position: relative;
		    background: none;
		    color: white
		}
		
		.create-button::after {
		    content: '';
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    width: 100%;
		    height: 4px;
		    background: -webkit-gradient(linear, left top, right top, from(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), color-stop(#47cf73), color-stop(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), to(#47cf73));
		    background: linear-gradient(90deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
		    background-size: 200% 200%
		}
		
		.create-button:focus::after,.create-button:hover::after {
		    -webkit-animation: rainbow-border 1.5s linear infinite;
		    animation: rainbow-border 1.5s linear infinite
		}
		
		@-webkit-keyframes rainbow-border {
		    0% {
		        background-position: 0% 50%
		    }
		
		    50% {
		        background-position: 100% 50%
		    }
		
		    100% {
		        background-position: 200% 50%
		    }
		}
		
		@keyframes rainbow-border {
		    0% {
		        background-position: 0% 50%
		    }
		
		    50% {
		        background-position: 100% 50%
		    }
		
		    100% {
		        background-position: 200% 50%
		    }
		}
	</style>
	<body>
		<div class="create-button"></div>
	</body>
</html>
